<template>
  <div class="top-hurdle">
    <span class="title">{{ title }}</span>

    <div class="action-field">
      <el-button type="primary" @click="handleMinimum">最小化</el-button>
      <el-button type="primary" @click="handleMaximize">最大化</el-button>
      <el-button type="primary" @click="appQuit">关闭</el-button>
    </div>
  </div>
</template>

<script setup>
import { bridgeKeys } from '@renderer/utils/dicts';

defineOptions({
  name: 'TopHurdle',
});
const props = defineProps({
  title: {
    type: String,
    default: '小屋社交平台',
  },
});

/*最大化/取消最大化*/
function handleMaximize() {
  window.electron.ipcRenderer.send(bridgeKeys.maximize);
}

/*最小化*/
function handleMinimum() {
  window.electron.ipcRenderer.send(bridgeKeys.minimize);
}

/*退出应用*/
function appQuit() {
  window.preloadApi.quitApp();
}
</script>

<style scoped lang="less">
.top-hurdle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0076f6;
  padding: 10px;
  -webkit-app-region: drag; /* 使顶部栏可拖动 */
  .title {
    color: #fff;
    -webkit-app-region: no-drag; /* 按钮不可拖动 */
  }
  .action-field {
    .el-button {
      -webkit-app-region: no-drag; /* 按钮不可拖动 */
    }
  }
}
</style>
